import 'package:flutter/material.dart';

class ColumnarChart extends StatefulWidget {
  ColumnarChart({Key? key}) : super(key: key);

  @override
  _ColumnarChartState createState() => _ColumnarChartState();
}

class _ColumnarChartState extends State<ColumnarChart> {
  final double _width = 20.0;
  List<double> _heightList = [20, 40, 60.0, 80.0, 100.0, 120.0, 140.0, 160];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('柱状图')),
      body: Column(children: [
        axis(
          height: 160,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: List.generate(
              _heightList.length,
              (index) {
                return cylinder(
                  height: _heightList[index],
                  width: _width,
                  color: Colors.primaries[index % Colors.primaries.length],
                );
              },
            ),
          ),
        ),
        ElevatedButton(
          child: Text('反转'),
          onPressed: () {
            setState(() {
              _heightList = _heightList.reversed.toList();
            });
          },
        )
      ]),
    );
  }

  Widget axis({required Widget child, double? height}) {
    return Container(
      margin: EdgeInsets.all(10),
      height: height,
      child: child,
      decoration: BoxDecoration(
        border: Border(
          left: BorderSide(color: Colors.black, width: 2),
          bottom: BorderSide(color: Colors.black, width: 2),
        ),
      ),
    );
  }

  cylinder({double? height, double? width, Color? color}) {
    return AnimatedContainer(
      duration: Duration(seconds: 1),
      height: height,
      width: width,
      color: color,
    );
  }
}
